<div class="row">
  <div class="col-xs-12">
  <div class="box box-primary">
    <div class="box-header">
      <div class="row">
        <div class="col-md-3">
          <h3 class="box-title">Hover Data Table</h3>
        </div>
        <div class="col-md-3 col-md-offset-6">
          <user-edit></user-edit>
        </div>
      </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
      <table class="table table-bordered table-striped table-hover table-condensed table-responsive" >
        <tr>
          <th style="width: 10px">#</th>
          <th>Task</th>
          <th>Progress</th>
          <th style="width: 40px">Label</th>
        </tr>
        <tr *ngFor="let task of tasks | async">
          <td>{{ task.id }}.</td>
          <td>{{ task.name }}</td>
          <td>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-primary" [style.width]="task.lable+'%'"></div>
            </div>
          </td>
          <td><span class="badge bg-blue">{{ task.process }}%</span></td>
        </tr>
      </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer clearfix">
      <ul class="pagination pagination-sm no-margin pull-right">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>
    </div>
  </div>
  <!-- /.box -->
</div>
  <!-- /.col -->
</div>
